<template>
  <div class="user-info-container" v-show="showStore1.show === 1">
    <div class="user-profile">
      <div class="profile-left">
        <div class="avatar-container" >
          <van-image
              width="100%"
              height="100%"
              :src="getUserAvatar(user.userImage)"
              @click="toggleAvatarView"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
<!--        <p class="name">{{ user.userName }}</p>-->
      </div>
      <div class="profile-right" @click="editor">
        <p class="info-item">姓名：{{user.userName}}</p>
        <p class="info-item">工号：{{user.userNumber}}</p>
        <p class="info-item">职位：{{user.userType}}</p>
        <p class="info-item">学院：{{user.department}}</p>
      </div>
    </div>
    <div class="function-item" @click="goToClassManger">
      <span>班级管理</span>
      <i class="el-icon-arrow-right"></i>
    </div>
    <div class="function-item" @click="goToPointsExchange">
      <span>积分兑换</span>
      <i class="el-icon-arrow-right"></i>
    </div>
    <div class="function-item" @click="goToXiaoxi">
      <span>消息列表</span>
      <i class="el-icon-arrow-right"></i>
    </div>
    <div class="function-item" @click="goToTasks">
      <span>历史任务</span>
      <i class="el-icon-arrow-right"></i>
    </div>
    <div class="function-item" @click="goToSettings">
      <span>设置</span>
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
  <Avater v-show="showStore1.show === 2"/>
</template>

<script setup lang="ts" name="UserInfoView">
import { useUserStore } from '../../Store/modules/userinfo/UserInfo.js'
import router from "../../Router";
import {computed, reactive} from "vue";
import defaultAvatar from '../../Assets/img/js_tx.webp';
import Avater from "./other/Avater.vue";
import { showStore } from '../../Store/modules/other/show'

const userStore = useUserStore();
const showStore1 = showStore();

// 职位转化
const userTypeText = computed(() => {
  switch(userStore.userInfo?.userType) {
    case 1: return '领导'
    case 2: return '辅导员'
    case 3: return '教师'
    default: return '未知身份'
  }
})

// 安全获取用户头像
const getUserAvatar = (avatarUrl) => {
  return avatarUrl && isValidUrl(avatarUrl) ? avatarUrl : defaultAvatar;
};

// 简单的URL验证
const isValidUrl = (url) => {
  try {
    new URL(url);
    return true;
  } catch {
    return false;
  }
};

const user = reactive({
  userImage: userStore.userInfo.userImage || '',
  department: userStore.userInfo.department || '未设置学院',
  userType: userTypeText,
  userNumber: userStore.userInfo.userNumber || '未设置工号',
  userName: userStore.userInfo.userName || '未设置姓名',
})

// 切换头像视图
const toggleAvatarView = () => {
  showStore1.updateshow(2);
}

function goToClassManger() {
  router.push('/ClassMangerView')
}

function goToPointsExchange() {
  router.push('/jfdh/jflist')
}

function goToTasks() {
  router.push('/lsrw/xkrw')
}
function goToXiaoxi() {
  router.push('/xiaoxi/xiaoxilist')
}

function goToSettings() {
  router.push('/UserInfoSetting')
}

function editor() {
  router.push('/editor')
}
</script>

<style scoped>
/* 基础布局设置 */
.user-info-container {
  padding: 20px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: white;
}

/* 用户信息卡片 */
.user-profile {
  margin-top: 15%;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgb(124, 68, 109) 0%, rgb(158, 98, 138) 100%);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 4px 12px rgba(124, 68, 109, 0.15);
  color: white;
}

.profile-left {
  flex: 0 0 30%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background-color: #f0e6ed;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.name {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 500;
  color: white;
}

.profile-right {
  flex: 1;
  padding-left: 20px;
}

.info-item {
  margin: 10px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

/* 功能项列表 */
.function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  border: 1px solid #e8d5e3;
  font-size: 16px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.function-item:hover {
  background-color: rgba(124, 68, 109, 0.05);
  transform: translateX(3px);
}

.function-item span {
  color: #333;
  font-weight: 500;
}

.el-icon-arrow-right {
  color: rgb(158, 98, 138);
  font-weight: bold;
}
</style>
